<template>
    <div class="lottery-list" :style="style">
        <div class="list" :style="style">
            <scroll :data="lotteryList" :probeType="2" @pullingUp="onPullingUp" :pullUpLoad="true" :bounce="true">
                <ul>
                    <li v-for="(item, index) in lotteryList" :key="index" :class="{'redeemed' : item.status !=0 }">
                        <img :src="item.prize.pic" alt="">
                        <div class="prize-info">
                            <div class="tittle">
                                <div class="title">
                                    {{ item.prize.name }} * {{ item.prize.num }}
                                </div>
                                <div class="exchange-status">
                                    <div class="exchange" v-if="item.status == 0" @click="confirmShow(item)">兑换</div>
                                    <!-- status ==> 0：未兑换；1：已兑换；2：已过期 -->
                                    <!-- type ==> 1：余额奖励；2：商品折扣奖励；3：实物奖励 -->
                                    <div class="exchanged" v-if="item.status == 1" @click="toLogistics(item)">
                                        已兑换<span v-if="item.prize.type == 3">(查看物流)</span>
                                    </div>
                                    <div class="exchanged" v-if="item.status == 2" @click="toLogistics(item)">
                                        已过期
                                    </div>
                                </div>
                            </div>
                            <div class="time">
                                <div>中奖时间：{{ item.created }}</div>
                                <div>到期时间：{{ item.overdue }}</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </scroll>
        </div>
        <confirm ref="confirm" :text="text" confirmBtnText="确定" cancelBtnText="我再想想" @confirm="exchange" />
    </div>
</template>

<script>
import Confirm from 'common/confirm';
import Scroll from 'common/scroll';
import api from '@/request/api';

const HEIGHT = document.documentElement.clientHeight + 'px';
export default {
    data() {
        return {
            style: {
                height: HEIGHT
            },
            page: 1,
            lotteryList: [],
            text: '是否确定兑换奖励?'
        }
    },
    components: { Confirm, Scroll },
    created() {
        this._getResuleList();
    },
    methods: {
        _getResuleList() {
            // this.showGlobaLoading()
            this.request
                .get(api.lotteryResultList, {
                    // page_size: 20,
                    page: this.page
                })
                .then((res) => {
                    this.page++;
                    this.lotteryList = this.lotteryList.concat(res);
                    // this.hideGlobaLoading();
                })
                .catch((err) => {
                    // this.hideGlobaLoading();
                    console.log(err);
                });
        },
        onPullingUp() {
            this._getResuleList();
        },
        confirmShow(item) {
            if (item.prize.type == 3) {
                this.text = '实物奖品会与今日最近一次购买物品一同发出'
            }
            this.exItem = item
            this.$refs.confirm.show()
        },
        exchange() {
            let item = this.exItem
            // if (item.prize.type == 3) {
            //     this.$router.push({
            //         name: 'lottery-default-address',
            //         query: {
            //             userprize_id: item.id,
            //             table_id: item.table_id,
            //             type: item.prize.type
            //         }
            //     })
            // } else {
            this.request.post(api.lotteryCash, {
                userprize_id: item.id,
                table_id: item.table_id,
                type: item.prize.type,
            }).then((res) => {
                if (res) {
                    this.$toast({
                        message: '兑换成功',
                        duration: 1500
                    })
                    location.reload()
                } else {
                    this.$toast({
                        message: '兑换失败',
                        duration: 1500
                    })
                }
            }).catch((err) => {
                console.log(err);
            });
            // }
        },
        toLogistics(item) {

            if (item.prize.type == 3) {
                this.$router.push({
                    name: 'lottery-logistics',
                    query: {
                        // userprize_id: 5,
                        userprize_id: item.id,
                    }
                });
            }
        }
    },
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.lottery-list {
    // width: vw(375);
    background: grayF;
    padding: 0 cellPadding;
}

.list {
    .list-wrapper {
        background: grayF;
    }

    li {
        height: vw(60);
        background: #F7E0BE;
        background: linear-gradient(180deg, #FFBC9B 0%, #F85C75 100%);
        border-radius: vw(5);
        margin-top: vw(10);
        padding: cellPadding vw(10);
        flex-x(flex-start);

        img {
            width: vw(60);
            height: vw(60);
            margin-left: vw(10);
        }

        .prize-info {
            width: vw(255);
            margin-left: vw(10);
            color: grayF;
            font-size: word16;
            line-height: vw(22);

            .tittle {
                width: 100%;
                flex-x(space-between);
                margin-bottom: vw(10);
            }

            .title {
                width: 55%;
                ellipsis();
                // border: 1px solid red;
            }

            .time {
                font-size: vw(8);
                line-height: vw(11);
            }

            .exchange-status {
                min-width: vw(62);
                height: vw(24);
                text-align: center;
                line-height: vw(24);
                border-radius: 30px;
                background: grayF;
                color: gray3;
                font-size: word12;
                padding: 0 vw(5);
            }

            .exchanged {
                color: gray9;
                // flex-x();
            }
        }

        span:nth-child(2) {
            // word-vw(word14, #F6817F);
        }
    }

    .redeemed {
        background: linear-gradient(180deg, #EEEEEE 0%, #BBBBBB 100%);
    }

    li:nth-child(odd) {
        // background: #FDF9DB;
    }
}
</style>